﻿@model Props.AdminWeb.Models.AccountLogInModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="row">
    <div class="span12">
        <div class="row">
            <div class="span4">
                <div class="well">
                    <h3>
                        [Contenido Gráfico]<br />
                    </h3>
                </div>
            </div>
            <div class="span4">
                <div class="well">
                    <h3>
                        Aún no tiene una cuenta?<br />
                    </h3>
                    <p>
                        Regístrese y comience a utilizar su cuenta de prueba de 60 días.
                    </p>
                    <br />
                    <div id="register-form">
                        <div class="control-group" id="register-account-control-group">
                            <label>
                                Nombre de Cuenta</label>
                            <input type="text" class="" id="register-account" placeholder="Ingrese su nombre de cuenta..."
                                maxlength="20" />
                            <span class="help-block" id="register-account-help-block">Hasta 20 caracteres, sólo
                                letras y sin espacios.</span>
                        </div>
                        <div class="control-group" id="register-email-control-group">
                            <label>
                                Correo electrónico</label>
                            <input type="email" class="" id="register-email" placeholder="Ingrese su email..." />
                            <span class="help-block" id="register-email-help-block"></span>
                        </div>
                        <div class="control-group" id="register-password-control-group">
                            <label>
                                Contraseña</label>
                            <input type="password" class="" id="register-password" placeholder="Ingrese su contraseña..." />
                            <span class="help-block" id="register-password-help-block"></span>
                        </div>
                        <div class="control-group" id="register-control-group">
                        <p>
                            <button type="button" class="btn btn-success btn-large" id="register-submit" style="margin-top: 10px;">
                                Registrarse</button>
                        </p>
                        <span class="help-block" id="register-help-block"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="span4">
                <div class="well">
                    <h3>
                        Usuarios Registrados<br />
                    </h3>
                    <p>
                        Ingrese sus datos para ingresar al sitio de administración de su cuenta.
                    </p>
                    <br />
                    <div id="login-form">
                        <div class="control-group" id="login-account-control-group">
                            <label>
                                Nombre de Cuenta</label>
                            <input type="text" class="" id="login-account" placeholder="Ingrese su nombre de cuenta..."
                                maxlength="20" />
                            <span class="help-block" id="login-account-help-block"></span>
                        </div>
                        <div class="control-group" id="login-email-control-group">
                            <label>
                                Correo electrónico</label>
                            <input type="email" class="" id="login-email" placeholder="Ingrese su email..." />
                            <span class="help-block" id="login-email-help-block"></span>
                        </div>
                        <div class="control-group" id="login-password-control-group">
                            <label>
                                Contraseña</label>
                            <input type="password" class="" id="login-password" placeholder="Ingrese su contraseña..." />
                            <span class="help-block" id="login-password-help-block"></span>
                        </div>
                        <div class="control-group" id="login-remember-control-group">
                            <label>
                                Recordar mi cuenta</label>
                            <input type="checkbox" class="" id="login-remember" />
                        </div>
                        <div class="control-group" id="login-control-group">
                        <p>
                            <button type="button" class="btn btn-primary btn-large" id="login-submit" style="margin-top: 10px;">
                                Entrar</button>
                        </p>
                        <span class="help-block" id="login-help-block"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section Scripts
{
    <script type="text/javascript">

        var isAccountAvailable = false;

        $(document).ready(function () {
            $("#register-submit").click(function () {
                submitRegister();
            });

            $("#login-submit").click(function () {
                submitLogin();
            });

            $("#register-account").change(function () {
                if (checkRegisterAccount())
                    checkAccountAvailability();
            });

            $("#register-email").change(function () {
                checkRegisterEmail();
            });

            $("#register-password").change(function () {
                checkRegisterPassword();
            });

            $("#login-account").change(function () {
                checkLoginAccount();
            });

            $("#login-email").change(function () {
                checkLoginEmail();
            });

            $("#login-password").change(function () {
                checkLoginPassword();
            });

        });

        function submitRegister() {
            if (isRegistrationDataValid()) {
                var account = $("#register-account").val();
                var email = $("#register-email").val();
                var password = $("#register-password").val();

                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("Register", "Account")',
                    data: { account: account, email: email, password: password },
                    success: function (response) {
                        if (response.hasError) {

                            showMessage('register', 'error', '<i class="icon-remove"></i> ' + response.message);

                            isAccountAvailable = false;
                        }
                        else {
                            window.location.href = response.redirectUrl;
                        }
                    },
                    dataType: 'json'
                });
            }
        }

        function isRegistrationDataValid() {
            var hasErrors = false;

            if (!checkRegisterAccount()) {
                hasErrors = true;
            }

            if (!isAccountAvailable) {
                hasErrors = true;
            }

            if (!checkRegisterEmail()) {
                hasErrors = true;
            }

            if (!checkRegisterPassword()) {
                hasErrors = true;
            }

            return !hasErrors;
        }

        function checkRegisterAccount() {

            var account = $("#register-account").val();

            if (account == null || account == undefined || account == '') {

                showMessage('register-account', 'error', '<i class="icon-remove"></i> Debe ingresar un nombre para su cuenta.');

                isAccountAvailable = false;

                return false;
            }

            removeMessage('register-account');

            return true;
        }

        function checkRegisterEmail() {

            var email = $("#register-email").val();

            if (email == null || email == undefined || email == '') {

                showMessage('register-email', 'error', 'Ingrese un correo electrónico.');

                return false;
            }

            if (email != "" && !isEmail(email)) {
                showMessage('register-email', 'error', 'El correo electrónico es inválido.');

                return false;
            }

            removeMessage('register-email');

            return true;
        }

        function checkRegisterPassword() {

            var password = $("#register-password").val();

            if (password == null || password == undefined || password == '') {

                showMessage('register-password', 'error', 'Ingrese una contraseña.');

                return false;
            }

            if (password != null && password.length < 6) {

                showMessage('register-password', 'error', 'La contraseña debe tener al menos 6 caracteres.');

                return false;
            }

            removeMessage('register-password');

            return true;
        }

        function checkAccountAvailability() {

            showMessage('register-account', 'warning', 'Verificando el nombre de cuenta...');

            var account = $("#register-account").val();

            $.ajax({
                type: 'POST',
                url: '@Url.Action("CheckAccount", "Account")',
                data: { account: account },
                success: function (response) {
                    if (response.hasError) {
                        showMessage('register-account', 'error', '<i class="icon-remove"></i> ' + response.message);

                        isAccountAvailable = false;
                    }
                    else {
                        showMessage('register-account', 'success', '<i class="icon-ok"></i> ' + response.message);

                        isAccountAvailable = true;
                    }

                    return response.hasError;
                },
                error: function (response) {
                    showMessage('register-account', 'error', '<i class="icon-remove"></i> No se pudo verificar el nombre de cuenta. Intente de nuevo.');
                },
                dataType: 'json'
            });

            return false;
        }

        function submitLogin() {
            if (isLoginDataValid()) {
                var account = $("#login-account").val();
                var email = $("#login-email").val();
                var password = $("#login-password").val();
                var remember = $('#login-remember').is(':checked');

                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("LogIn", "Account")',
                    data: { account: account, email: email, password: password, remember: remember },
                    success: function (response) {
                        if (response.hasError) {

                            showMessage('login', 'error', '<i class="icon-remove"></i> ' + response.message);

                            isAccountAvailable = false;
                        }
                        else {
                            window.location.href = response.redirectUrl;
                        }
                    },
                    dataType: 'json'
                });
            }
        }

        function isLoginDataValid() {
            var hasErrors = false;

            if (!checkLoginAccount()) {
                hasErrors = true;
            }

            if (!checkLoginEmail()) {
                hasErrors = true;
            }

            if (!checkLoginPassword()) {
                hasErrors = true;
            }

            return !hasErrors;
        }

        function checkLoginAccount() {

            var account = $("#login-account").val();

            if (account == null || account == undefined || account == '') {

                showMessage('login-account', 'error', 'Debe ingresar el nombre de su cuenta.');

                isAccountAvailable = false;

                return false;
            }

            removeMessage('login-account');

            return true;
        }

        function checkLoginEmail() {

            var email = $("#login-email").val();

            if (email == null || email == undefined || email == '') {

                showMessage('login-email', 'error', 'Ingrese su correo electrónico.');

                return false;
            }

            if (email != "" && !isEmail(email)) {
                showMessage('login-email', 'error', 'El correo electrónico es inválido.');

                return false;
            }

            removeMessage('login-email');

            return true;
        }

        function checkLoginPassword() {

            var password = $("#login-password").val();

            if (password == null || password == undefined || password == '') {

                showMessage('login-password', 'error', 'Ingrese su contraseña.');

                return false;
            }

            if (password != null && password.length < 6) {

                showMessage('login-password', 'error', 'La contraseña debe tener al menos 6 caracteres.');

                return false;
            }

            removeMessage('login-password');

            return true;
        }


    </script>
}

